<template>
  <div class="footerbox">
    <!--      图标及地址-->
    <div class="logo">
      <img src="../../assets/images/hdxylogonew.png" style="width: 300px">
      <div class="describe">
        <p>
          版权：©️2021 邯郸学院
          <img src="../../assets/images/beian.png">备案：
          <a target="_blank" href="https://beian.miit.gov.cn/">
            冀ICP备05002795号
          </a>
        </p>
        <p>地址：河北省邯郸市邯山区学院北路530号 &nbsp; &nbsp; &nbsp; 056005</p>
      </div>
    </div>
    <!--      功能区-->
    <ul class="function">
      <li><a href="contact.html" style="border: none">联系我们</a></li>
      <li><a href="about.html">机构概况</a></li>
      <li><a href="info_public.html">信息公开</a></li>
      <li><a href="newslist.html">办事指南</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'bottomIndex'
}
</script>

<style scoped>
.footerbox {
  width: 1220px;
  height: 200px;
  padding: 0 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.logo {
  float: left;
  display: flex;
  align-items: center;
}

.logo > img {
  padding-right: 30px;
  border-right: 2px solid white;
}

.logo .describe {
  padding: 30px;
  color: white;
}

.logo .describe img {
  position: relative;
  top: 4px;
  padding: 0 5px;
}

.logo .describe a {
  color: white;
  text-decoration: none;
}

li {
  list-style: none;
  float: left;
}

li > a {
  color: white;
  padding: 0 10px;
  border-left: 2px solid white;
  text-decoration: none;
}

.logo .describe a:hover, li > a:hover {
  color: rgba(255, 255, 255, 0.7);
}
</style>
